<template>
  <div class="notice-list">
    <t-loading v-if="loading"></t-loading>
    <div class="notice-item" @click="onNoticeDetails(item.id)" v-for="item in dataList" :key="item.id">
      <div class="title">{{item.title}}</div>
      <div class="footer">
        <span class="date">{{item.createTime}}</span>
      </div>
    </div>
    <div class="page">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage" :page-size="form.pageSize" show-sizer/>
    </div>
  </div>
</template>

<script>
import {contentList} from "@/api/content";
import TLoading from "@/components/t-loading";

export default {
  name: "others",
  components: {TLoading},
  data() {
    return {
      totalPage: 1,
      loading: false,
      dataList: [],
      form: {
        position: 'activity', // 位置编码
        pageNo: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    onNoticeDetails(id) {
      // 公告详情
      this.$router.push(`/notice/${id}`)
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getDataList();
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    getDataList() {
      // 文章查询 其他
      this.loading = true;
      contentList(this.form).then((res)=>{
        this.loading = false;
        this.dataList = res.result;
      }).catch(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.notice-list {
  .notice-item {
    border-bottom: 1px solid @t-table-border-color;
    padding: 12px 0;
    .title {
      cursor: pointer;
      color: @t-title-color;
      font-size: 14px;
      font-weight: 500;
      &:hover {
        color: @primary-color;
      }
    }
    .footer {
      text-align: right;
      .date {
        margin-top: 12px;
        color: @t-special-color;
        font-size: 14px;
      }
    }
  }
  .page {
    margin: 24px 0;
    text-align: right;
  }
}
</style>